<template>
  <a-row>
    <a-col :span="24">
      <a-card>
        <a-row>
          <a-col :span="8">
            <a-statistic title="总阅读量" :value="statistic.viewCount">
              <template #suffix>
                <UserOutlined />
              </template>
            </a-statistic>
          </a-col>
          <a-col :span="8">
            <a-statistic title="总点赞量" :value="statistic.voteCount">
              <template #suffix>
                <like-outlined />
              </template>
            </a-statistic>
          </a-col>
          <a-col :span="8">
            <a-statistic title="点赞率" :value="statistic.voteCount / statistic.viewCount * 100" :precision="2" suffix="%"
              :value-style="{ color: '#cf1322' }">
              <template #suffix>
                <like-outlined />
              </template>
            </a-statistic>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
  </a-row>
  <br>
  <a-row :gutter="16">
    <a-col :span="12">
      <a-card>
        <a-row>
          <a-col :span="12">
            <a-statistic title="今日阅读" :value="statistic.todayViewCount" style="margin-right: 50px">
              <template #suffix>
                <UserOutlined />
              </template>
            </a-statistic>
          </a-col>
          <a-col :span="12">
            <a-statistic title="今日点赞" :value="statistic.todayVoteCount">
              <template #suffix>
                <like-outlined />
              </template>
            </a-statistic>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card>
        <a-row>
          <a-col :span="12">
            <a-statistic title="预计今日阅读" :value="statistic.todayViewIncrease" :value-style="{ color: '#0000ff' }">
              <template #suffix>
                <UserOutlined />
              </template>
            </a-statistic>
          </a-col>
          <a-col :span="12">
            <a-statistic title="预计今日阅读增长" :value="statistic.todayViewIncreaseRateAbs" :precision="2" suffix="%"
              class="demo-class"
              :value-style="statistic.todayViewIncreaseRate < 0 ? { color: '#3f8600' } : { color: '#cf1322' }">
              <template #prefix>
                <arrow-down-outlined v-if="statistic.todayViewIncreaseRate < 0" />
                <arrow-up-outlined v-if="statistic.todayViewIncreaseRate >= 0" />
              </template>
            </a-statistic>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>

import { defineComponent, ref, onMounted } from 'vue'
import axios from 'axios';



export default {
  name: "the-welcome",
  setup() {
    const statistic = ref();
    statistic.value = {};
    const getStatistic = () => {
      axios.get('/ebook-snapshot/get-statistic').then((response) => {
        const data = response.data;
        if (data.code === '200') {
          const statisticResp = data.data; //返回的数组 [昨天,今天]
          statistic.value.viewCount = statisticResp[1].viewCount;
          statistic.value.voteCount = statisticResp[1].voteCount;
          statistic.value.todayViewCount = statisticResp[1].viewIncrease;
          statistic.value.todayVoteCount = statisticResp[1].voteIncrease;

          // 按分钟计算当前时间点，占一天的百分比
          const now = new Date();

          /* 
          now.getHours() 方法获取当前的小时数（0-23）。
          now.getMinutes() 方法获取当前的分钟数（0-59）。

          (now.getHours() * 60 + now.getMinutes()) 这部分将小时数乘以每小时的分钟数（60分钟），加上当前的分钟数，从而计算出从当天0点开始到现在为止过了多少分钟。

          /(60 * 24) 取得的总分钟数除以一整天的分钟数（60分钟*24小时=1440分钟），得到当前时间占整天的比例。
          
        假设现在是凌晨0点30分，那么：


        const now = new Date(); // 假设现在是凌晨0点30分
        此时 now.getHours() 返回 0（因为是0点），now.getMinutes() 返回 30（因为是30分）：


        let totalMinutes = (now.getHours() * 60 + now.getMinutes()); // 计算得0 * 60 + 30 = 30
        let nowRate = totalMinutes / (60 * 24); // 计算得30 / 1440 ≈ 0.0208333

           */
          const nowRate = (now.getHours() * 60 + now.getMinutes()) / (60 * 24);
          // 今天预计 = 今天到目前的阅读量 / (当前时间点占一天的百分比)
          statistic.value.todayViewIncrease = parseInt(String(statisticResp[1].viewIncrease / nowRate));
          // todayViewIncreaseRate：今日预计增长率
          // 今日预计增长率 = (今天预计 - 昨天)/昨天
          statistic.value.todayViewIncreaseRate = (statistic.value.todayViewIncrease - statisticResp[0].viewIncrease) / statisticResp[0].viewIncrease * 100;
          statistic.value.todayViewIncreaseRateAbs = Math.abs(statistic.value.todayViewIncreaseRate);



        }
      });
    };


    onMounted(() => {
      getStatistic();


    });

    return {
      statistic
    }
  }
}
</script>

<style  scoped>
.tip {
  padding: 10px 5px;
  margin-bottom: 20px;
  color: red;
  border: 1px solid transparent;
  background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0/.6em .6em;
  animation: ants 12s linear infinite;
}
</style>